<template>
	<view class="lh-w-full lh-bg-white lh-border-box" :style="{ backgroundColor: backgroundColor }"
		v-if="fileList.length && fileList.length > 0">
		<view class="title"> 附件 </view>
		<view class="file-item" v-for="o in fileList" :key="o.id" @click="toPreview(o)">
			<img class="file-img" :src="getFileIcon(o.fileEntity.fileExtension)" alt="" />
			<view class="file-content">
				<view class="file-name u-line-2">
					{{ o.fileName }}
				</view>
				<view class="file-info">
					<text>{{ o.fileEntity.fileSizeFormat }}</text>
				</view>
			</view>
		</view>
		<u-action-sheet :list="list" :tips="tips" v-model="show" @click="click"></u-action-sheet>
	</view>
	<view class="lh-w-full" v-else></view>
</template>

<script>
	export default {
		name: "lh-filelist",
		props: {
			bizKey: {
				type: [String, Number],
				default: "",
			},
			bizType: {
				type: String,
				default: "",
			},
			backgroundColor: {
				type: String,
				default: "#ffffff",
			},
		},
		created() {
			if (this.bizType !== '' && this.bizKey !== '') {
				this.$u.api.getAnnex.fileList({
					bizKey: this.bizKey,
					bizType: this.bizType,
					_t: Date.now()
				}).then((res) => {
					if (res.length) {
						this.fileList = [...res];
					}
				});
			}
		},
		data() {
			return {
				fileList: [],
				fileIconList: [{
						type: "jpg",
						icon: require("@/static/fileIcon/jpg.png"),
						isPreview: true,
						filetype: 0,
					},
					{
						type: "png",
						icon: require("@/static/fileIcon/jpg.png"),
						isPreview: true,
						filetype: 0,
					},
					{
						type: "docx",
						icon: require("@/static/fileIcon/docx.png"),
						isPreview: true,
						filetype: 2,
					},
					{
						type: "doc",
						icon: require("@/static/fileIcon/docx.png"),
						isPreview: true,
						filetype: 2,
					},
					{
						type: "mp4",
						icon: require("@/static/fileIcon/mp4.png"),
						isPreview: true,
						filetype: 1,
					},
					{
						type: "xls",
						icon: require("@/static/fileIcon/xls.png"),
						isPreview: true,
						filetype: 2,
					},
					{
						type: "xlsx",
						icon: require("@/static/fileIcon/xls.png"),
						isPreview: true,
						filetype: 2,
					},
					{
						type: "zip",
						icon: require("@/static/fileIcon/zip.png"),
						isPreview: false,
					},
					{
						type: "pdf",
						icon: require("@/static/fileIcon/pdf.png"),
						isPreview: true,
						filetype: 2,
						// isPreview: false,
					},
					{
						type: "ppt",
						icon: require("@/static/fileIcon/ppt.png"),
						isPreview: true,
						filetype: 2,
					},
					{
						type: "pptx",
						icon: require("@/static/fileIcon/ppt.png"),
						isPreview: true,
						filetype: 2,
					},
				],
				anyIcon: require("@/static/fileIcon/any.png"),
				list: [{
					text: "下载",
				}, ],
				tips: {
					text: "此文件不支持预览",
					color: "#666666",
					fontSize: 32,
				},
				show: false,
				fileObj: null,
			};
		},
		computed: {
			getFileIcon() {
				return (type) => {
					const index = this.fileIconList.findIndex((e) => {
						return e.type === type;
					});

					if (index === -1) {
						return this.anyIcon;
					}
					return this.fileIconList[index].icon;
				};
			},
		},
		methods: {
			toPreview(o) {
				const index = this.fileIconList.findIndex((e) => {
					return e.type === o.fileEntity.fileExtension;
				});
				if (index >= 0 && this.fileIconList[index].isPreview) {
					uni.setStorageSync("fileInfo", o);
					uni.navigateTo({
						url: `/pages/common/preview?filetype=${this.fileIconList[index].filetype}`,
					});
				} else {
					this.show = true;
					this.fileObj = o;
				}
			},
			click(index) {
				// console.log(index,"shiba",this.fileObj)
				uni.downloadFile({
					url: "/whdc/a/file/download/" + this.fileObj.id,
					success: (res) => {
						// alert(JSON.stringify(res));
						this.download(res.tempFilePath, this.fileObj.fileName);
						this.fileObj = null;
					},
					fail: (err) => {
						// alert(JSON.stringify(err));
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
			download(blobUrl, filename) {
				uni.showToast({
					icon: 'none',
					mask: true,
					title: '文件下载中...',
				});
				const a = document.createElement("a");

				if (!a.click) {
					throw new Error('DownloadManager: "a.click()" is not supported.');
				}

				a.href = blobUrl;
				a.target = "_parent";

				if ("download" in a) {
					a.download = filename;
				}

				(document.body || document.documentElement).appendChild(a);
				a.click();
				a.remove();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.title {
		padding: 28rpx 28rpx 28rpx 0rpx;
		width: 100%;
		font-size: 28rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.file-item {
		height: 156rpx;
		width: 100%;
		padding: 24rpx 0rpx;
		display: flex;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

		.file-img {
			width: 80rpx;
			height: 80rpx;
			flex-grow: 0;
			flex-shrink: 0;
		}

		.file-content {
			height: auto;
			width: calc(100% - 80rpx);
			padding-left: 24rpx;
			font-size: 26 rpx;
			font-weight: bold;
			color: #333333;

			.file-name {
				width: 100%;
				height: auto;
				line-height: 40rpx;
				min-height: 60rpx;
			}

			.file-info {
				height: 40rpx;
				width: 100%;
				line-height: 40rpx;
				display: flex;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>
